import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import {View, Text, Image} from '@tarojs/components'
import {GetRequest,vcmonitor} from "../../../utils/tools";
import {h5Wx} from "../../../utils/h5.service";
import GzhAuth from "../../../components/gzh-auth/gzh-auth"
import './list.scss'


export default class CheckTicket extends Component {
  state: {
    phoneType: string
    url: string
  } = {
    phoneType:'',
    url:'',
  }
  async UNSAFE_componentWillMount() {
    if(process.env.TARO_ENV==='h5'){
      await h5Wx.getConfig()
    }
    const that = this
    //检测手机型号
    Taro.getSystemInfo({
      success: function(res) {
        that.setState({
          phoneType :res.platform
        })
      }
    })
  }
  async componentDidShow(){
    vcmonitor(this)
    const {url} = Taro.getCurrentInstance().router.params
    this.setState({url})

  }
  onCopy(str){
    try{
      Taro.setClipboardData({
        data: str
      })
      if(process.env.TARO_ENV==='h5'){
        Taro.showToast({ title: '复制成功'})
      }
    } catch (e) {
      Taro.showToast({ title: '复制失败'})
    }
  }
  render(){
    const { url,phoneType } = this.state
    return (
      <View className='words-root'>
        <GzhAuth />
        <View className='down-explain'>
          <View className='downlode-title'>手机浏览器下载</View>
          <View className='dowmlode-list'>
            <View className='dowmlode-p'>
              <Text className='dowmlode-color'>1.</Text>点击下方按钮<Text className='dowmlode-color'>复制</Text>文件下载链接
            </View>
            <View className='dowmlode-sp'>
              {url?url:''}
            </View>
          </View>
          <View className='dowmlode-list2'>
            <View className='dowmlode-p'>
              <Text className='dowmlode-color'>2.</Text>打开<Text className='dowmlode-color'>{phoneType=='ios'?'Safari浏览器':'浏览器'}</Text>访问，即可下载
            </View>
            <View className='downlode-img'><Image src='https://resource.ivcheng.com/resources/images/openlink.png' mode='widthFix' /></View>
          </View>
          {phoneType=='ios' ? <View className='dowmlode-list2'>
            <View className='dowmlode-p'>
              <Text className='dowmlode-color'>3.</Text>点击<Text className='dowmlode-color'>分享按钮，</Text>可储存到文件
            </View>
            <View className='downlode-img'><Image src='https://resource.ivcheng.com/resources/images/iossave.png' mode='widthFix' /></View>
          </View>
            :
            <View className='dowmlode-list2'>
              <View className='dowmlode-p'>
                <Text className='dowmlode-color'>3.</Text>下载完成后，可在<Text className='dowmlode-color'>下载管理</Text>中找到文件
              </View>
              <View className='downlode-img'><Image src='https://resource.ivcheng.com/resources/images/androidsave.png' mode='widthFix' /></View>
            </View>
          }
          <View className='copyLink' onClick={this.onCopy.bind(this,url)}>复制链接</View>
        </View>
      </View>
    )
  }
}
